<div
  #PrimeContainer
  class="devui-category-search-container devui-category-search-id-{{ id }}"
  [ngClass]="{ 'container-hover': isHover && !isFocus }"
  (mouseenter)="isHover = true"
  (mouseleave)="isHover = false"
>
  <div class="devui-category-search-icon" (click)="search()">
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      class="svg-icon-search"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M7.30811922,1 C10.7919973,1 13.6162384,3.82424117 13.6162384,7.30811922 C13.6162384,8.72507634 13.149053,10.0329164 12.3603151,11.0860065 L14.7360564,13.4616238 C15.0879812,13.8135487 15.0879812,14.3841316 14.7360564,14.7360564 C14.3841316,15.0879812 13.8135487,15.0879812 13.4616238,14.7360564 L11.0860065,12.3603151 C10.0329164,13.149053 8.72507634,13.6162384 7.30811922,13.6162384 C3.82424117,13.6162384 1,10.7919973 1,7.30811922 C1,3.82424117 3.82424117,1 7.30811922,1 Z M7.31,2.51 C4.6590332,2.51 2.51,4.6590332 2.51,7.31 C2.51,9.9609668 4.6590332,12.11 7.31,12.11 C9.9609668,12.11 12.11,9.9609668 12.11,7.31 C12.11,4.6590332 9.9609668,2.51 7.31,2.51 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </div>
  <div #ScrollBarContainer class="devui-category-search-line-container">
    <ul class="devui-category-search-line">
      <li
        class="devui-tag-item"
        *ngFor="let item of selectedTags"
        #selectedDropdown="d-dropdown"
        [ngStyle]="{ width: tagMaxWidth || '' }"
        dDropDown
        appendToBody
        dDropDownToggle
        [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', ' leftUp']"
        [closeScope]="checkType(item)"
        (toggleEvent)="resetContent(selectedDropdown, item)"
      >
        <div class="devui-tag-container">
          <d-tag
            *ngIf="item.type !== 'label' && item.type !== 'checkbox'"
            [deletable]="true"
            [tag]="item.label + ': ' + (item.value[item.filterKey || 'label'] || '')"
            [titleContent]="item.title"
            (tagDelete)="removeTag(item)"
          ></d-tag>
          <d-tags
            *ngIf="item.type === 'label' || item.type === 'checkbox'"
            [deletable]="true"
            [tags]="[item]"
            [titleProperty]="'title'"
            (tagDelete)="removeTag(item)"
          >
            <ng-template let-tag="tag">
              <span>
                <span>{{ tag.label }}: </span>
                <ng-container *ngFor="let val of tag.value.cache; let i = index">
                  <span *ngIf="i > 0" class="devui-color-block-split-line"> | </span>
                  <span *ngIf="item.type === 'label'" class="devui-color-block-sm" [style.background]="val[tag.colorKey || 'color']"></span>
                  <span [style.color]="val[tag.colorKey || 'color']">{{ val[tag.filterKey || 'label'] || '' }}</span>
                </ng-container>
              </span>
            </ng-template>
          </d-tags>
        </div>
        <div
          dDropDownMenu
          class="devui-dropdown-menu devui-tag-dropdown-menu devui-dropdown-overlay devui-dropdown-menu-fix"
          [ngClass]="{ 'max-height': item.type !== 'treeSelect' }"
          [ngSwitch]="item.type"
        >
          <ng-template
            *ngSwitchCase="'radio'"
            [ngTemplateOutlet]="item?.customTemplate || radioTemplate"
            [ngTemplateOutletContext]="{ tagOption: item }"
          ></ng-template>
          <ng-template
            *ngSwitchCase="'dateRange'"
            [ngTemplateOutlet]="item?.customTemplate || dateRangeTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          >
          </ng-template>
          <ng-template
            *ngSwitchCase="'checkbox'"
            [ngTemplateOutlet]="item?.customTemplate || checkboxTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          ></ng-template>
          <ng-template
            *ngSwitchCase="'label'"
            [ngTemplateOutlet]="item?.customTemplate || labelTypeTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          ></ng-template>
          <ng-template
            *ngSwitchCase="'textInput'"
            [ngTemplateOutlet]="item?.customTemplate || textInputTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          ></ng-template>
          <ng-template
            *ngSwitchCase="'numberRange'"
            [ngTemplateOutlet]="item?.customTemplate || numberRangeTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          ></ng-template>
          <ng-template
            *ngSwitchCase="'treeSelect'"
            [ngTemplateOutlet]="item?.customTemplate || treeTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown, isSelected: true }"
          ></ng-template>
          <ng-template
            *ngSwitchDefault
            [ngTemplateOutlet]="item?.customTemplate"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown }"
          ></ng-template>
        </div>
      </li>
      <div class="devui-category-search-input">
        <div
          class="devui-input-container"
          #inputDropdown="d-dropdown"
          dDropDown
          appendToBody
          [trigger]="'manually'"
          [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', ' leftUp']"
          [closeScope]="checkType(currentSelectTag)"
          (toggleEvent)="resetContent(inputDropdown)"
        >
          <div style="width: 100%">
            <input
              class="devui-category-search-toggle"
              #InputEle
              dDropDownToggle
              dTextInput
              [readOnly]="inputReadOnly"
              [placeholder]="placeholderText || i18nCategorySearchText?.searchPlaceholder"
              [(ngModel)]="searchKey"
              (ngModelChange)="searchKeyChangeEvent($event)"
              (click)="openMenu(inputDropdown, $event)"
              (keyup)="checkInputSearching($event); openMenu(inputDropdown, $event)"
              (keydown.backspace)="backspaceEvent(inputDropdown)"
              (keydown.enter)="searchInputValue($event); closeMenu(inputDropdown)"
              (focus)="isHover = false; isFocus = true"
              (blur)="isFocus = false"
            />
          </div>
          <div
            dDropDownMenu
            class="devui-dropdown-menu devui-dropdown-overlay devui-dropdown-menu-fix"
            [ngClass]="{ 'max-height': currentSelectTag?.type !== 'treeSelect' }"
          >
            <ng-container *ngIf="!enterSearch && !currentSelectTag">
              <ul class="devui-dropdown-menu-template devui-tag-dropdown-menu devui-radio-template">
                <li *ngFor="let item of categoryDisplay" (click)="chooseCategory(item, inputDropdown); closeMenu(inputDropdown)">
                  <ng-template
                    *ngIf="item?.groupLength"
                    [ngTemplateOutlet]="customGroupNameTemplate || defaultGroupNameTemplate"
                    [ngTemplateOutletContext]="{ tag: item }"
                  ></ng-template>
                  <a *ngIf="item && item.groupLength === undefined" class="devui-dropdown-item">{{ item?.label }}</a>
                </li>
                <div class="devui-no-data-text" *ngIf="categoryDisplay.length === 0">{{ i18nCategorySearchText?.noFilterConditions }}</div>
              </ul>
            </ng-container>
            <ng-container *ngIf="enterSearch">
              <li class="devui-dropdown-item devui-search-description" (click)="searchInputValue($event); closeMenu(inputDropdown)">
                <a><span class="icon-search" style="margin: 0 4px"></span>{{ i18nCategorySearchText?.getSearchMessage(searchKey) }}</a>
              </li>
              <li *ngFor="let item of searchField" (click)="searchCategory(item); closeMenu(inputDropdown)">
                <a class="devui-dropdown-item"
                  ><span class="icon-search" style="margin: 0 4px"></span>{{ i18nCategorySearchText?.getFindingMessage(item?.label) }}</a
                >
              </li>
              <div class="devui-dividing-line"></div>
              <div class="devui-dropdown-menu-tip">{{ i18nCategorySearchText?.selectFilterCondition }}:</div>
              <ul class="devui-dropdown-menu-template devui-tag-dropdown-menu devui-radio-template">
                <li
                  *ngFor="let item of currentSearchCategory"
                  (click)="clearSearchKey(); checkInputSearching($event); chooseCategory(item, inputDropdown); closeMenu(inputDropdown)"
                >
                  <a class="devui-dropdown-item">{{ item?.label }}</a>
                </li>
              </ul>
            </ng-container>
            <ng-container *ngIf="!enterSearch && currentSelectTag" [ngSwitch]="currentSelectTag.type">
              <ng-template
                *ngSwitchCase="'radio'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || radioTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'dateRange'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || dateRangeTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'checkbox'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || checkboxTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'label'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || labelTypeTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'textInput'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || textInputTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'numberRange'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || numberRangeTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchCase="'treeSelect'"
                [ngTemplateOutlet]="currentSelectTag?.customTemplate || treeTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
              <ng-template
                *ngSwitchDefault
                [ngTemplateOutlet]="currentSelectTag?.customTemplate"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
            </ng-container>
          </div>
        </div>
      </div>
    </ul>
  </div>
  <div class="devui-category-search-ctrl-container" *ngIf="selectedTags.length || searchKey">
    <div class="devui-category-search-separate-line"></div>
    <div *ngIf="allowClear" class="devui-category-search-icon" (click)="clearFilter($event)">
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <title>{{ i18nCategorySearchText?.clearFilterCondition }}</title>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M4.61289944,3.20970461 L4.70710678,3.29289322 L8,6.585 L11.2928932,3.29289322 C11.6834175,2.90236893 12.3165825,2.90236893 12.7071068,3.29289322 C13.0675907,3.65337718 13.0953203,4.22060824 12.7902954,4.61289944 L12.7071068,4.70710678 L9.415,8 L12.7071068,11.2928932 C13.0976311,11.6834175 13.0976311,12.3165825 12.7071068,12.7071068 C12.3466228,13.0675907 11.7793918,13.0953203 11.3871006,12.7902954 L11.2928932,12.7071068 L8,9.415 L4.70710678,12.7071068 C4.31658249,13.0976311 3.68341751,13.0976311 3.29289322,12.7071068 C2.93240926,12.3466228 2.90467972,11.7793918 3.20970461,11.3871006 L3.29289322,11.2928932 L6.585,8 L3.29289322,4.70710678 C2.90236893,4.31658249 2.90236893,3.68341751 3.29289322,3.29289322 C3.65337718,2.93240926 4.22060824,2.90467972 4.61289944,3.20970461 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
    </div>
    <div
      *ngIf="allowSave"
      class="devui-category-search-icon"
      #saveDropdown="d-dropdown"
      dDropDown
      appendToBody
      [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', ' leftUp']"
      [closeScope]="'blank'"
      (toggleEvent)="createFilterInputAutoFocus(saveDropdown, createFilterInput, filterNameForm)"
    >
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        dDropDownToggle
      >
        <title>{{ i18nCategorySearchText?.saveFilter }}</title>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M12,1 L15,4 L15,13 C15,14.1045695 14.1045695,15 13,15 L3,15 C1.8954305,15 1,14.1045695 1,13 L1,3 C1,1.8954305 1.8954305,1 3,1 L12,1 Z M11.171,3 L3,3 L3,13 L4,13 L4,10 C4,9.48716416 4.38604019,9.06449284 4.88337887,9.00672773 L5,9 L11,9 C11.5128358,9 11.9355072,9.38604019 11.9932723,9.88337887 L12,10 L12,13 L13,13 L13,4.829 L11.171,3 Z M9.999,10.999 L5.999,10.999 L6,13 L10,13 L9.999,10.999 Z M7,5 C7.55228475,5 8,5.44771525 8,6 C8,6.55228475 7.55228475,7 7,7 L5,7 C4.44771525,7 4,6.55228475 4,6 C4,5.44771525 4.44771525,5 5,5 L7,5 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
      <div dDropDownMenu class="devui-save-panel">
        <div class="devui-save-panel-title">
          <span>{{ i18nCategorySearchText?.saveFilter }}</span>
        </div>
        <div class="devui-save-filter-name">
          <span>{{ i18nCategorySearchText?.filterTitle }}: </span>
          <form class="form" #filterNameForm="ngForm">
            <input
              class="devui-category-search-toggle"
              #createFilterInput
              dTextInput
              [(ngModel)]="filterName"
              [placeholder]="i18nCategorySearchText?.placeholder"
              autocomplete="off"
              name="filter-name"
              [dValidateRules]="filterNameRules"
            />
          </form>
        </div>
        <div class="devui-save-panel-operation-area">
          <d-button (btnClick)="createFilterFn(); saveDropdown.toggle()" [disabled]="filterNameForm.invalid">{{
            i18nCategorySearchText?.confirm
          }}</d-button>
          <d-button bsStyle="common" (btnClick)="saveDropdown.toggle()">{{ i18nCategorySearchText?.cancel }}</d-button>
        </div>
      </div>
    </div>
    <div
      *ngIf="allowShowMore"
      class="devui-category-search-icon"
      #seeMoreDropdown="d-dropdown"
      dDropDown
      appendToBody
      [alignOrigin]="PrimeContainer"
      [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', ' leftUp']"
    >
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        dDropDownToggle
      >
        <title>{{ i18nCategorySearchText?.seeMore }}</title>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M1,2 L3,2 L3,4 L1,4 L1,2 Z M1,7 L3,7 L3,9 L1,9 L1,7 Z M1,12 L3,12 L3,14 L1,14 L1,12 Z M5,2 L15,2 L15,4 L5,4 L5,2 Z M5,7 L15,7 L15,9 L5,9 L5,7 Z M5,12 L15,12 L15,14 L5,14 L5,12 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
      <div dDropDownMenu class="devui-selected-tags-list">
        <ul [ngStyle]="{ width: PrimeContainer?.clientWidth + 'px' }">
          <li class="devui-tag-item" *ngFor="let item of selectedTags; let i = index" (click)="scrollToTag(i, $event)">
            <div class="devui-tag-container">
              <d-tag
                *ngIf="item.type !== 'label' && item.type !== 'checkbox'"
                [deletable]="true"
                [tag]="item.label + ': ' + (item.value[item.filterKey || 'label'] || '')"
                (tagDelete)="removeTag(item)"
              ></d-tag>
              <d-tags
                *ngIf="item.type === 'label' || item.type === 'checkbox'"
                [deletable]="true"
                [tags]="[item]"
                [titleProperty]="'title'"
                (tagDelete)="removeTag(item)"
              >
                <ng-template let-tag="tag">
                  <span>{{ tag.label }}: </span>
                  <ng-container *ngFor="let val of tag.value.cache; let i = index">
                    <span *ngIf="i > 0" class="devui-color-block-split-line"> | </span>
                    <span
                      *ngIf="item.type === 'label'"
                      class="devui-color-block-sm"
                      [style.background]="val[tag.colorKey || 'color']"
                    ></span>
                    <span [style.color]="val[tag.colorKey || 'color']">{{ val[tag.filterKey || 'label'] || '' }}</span>
                  </ng-container>
                </ng-template>
              </d-tags>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<ng-template #defaultGroupNameTemplate let-item="tag">
  <div class="devui-category-search-group devui-font-secondary-title">{{ item?.groupName }}</div>
</ng-template>

<ng-template #radioTemplate let-tagOption="tagOption">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <ul *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template devui-tag-dropdown-menu devui-radio-template">
    <li *ngFor="let item of tagOption.options" (click)="chooseItem(tagOption, item)">
      <a class="devui-dropdown-item" [ngClass]="{ active: tagOption?.value?.label === item[tagOption.filterKey || 'label'] }">{{
        item[tagOption.filterKey || 'label']
      }}</a>
    </li>
  </ul>
</ng-template>

<ng-template #dateRangeTemplate let-tagOption="tagOption" let-dropdown="dropdown">
  <d-date-range-picker
    #dDatepicker
    [(ngModel)]="tagOption.value.value"
    [selectedRange]="tagOption.value.value"
    [showTime]="tagOption.showTime"
  ></d-date-range-picker>
  <div class="devui-date-picker-operation-area">
    <d-button (btnClick)="getDate(tagOption, dDatepicker); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #checkboxTemplate let-tagOption="tagOption" let-dropdown="dropdown">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template">
    <d-checkbox-group
      [(ngModel)]="tagOption.value.value"
      [options]="tagOption.options"
      [filterKey]="tagOption.filterKey || 'label'"
      [isShowTitle]="true"
    >
    </d-checkbox-group>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="chooseItems(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #labelTypeTemplate let-tagOption="tagOption" let-dropdown="dropdown">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template">
    <d-checkbox-group
      [(ngModel)]="tagOption.value.value"
      [options]="tagOption.options"
      [filterKey]="'$label'"
      [labelTemplate]="labelContent"
      [isShowTitle]="true"
    >
      <ng-template #labelContent let-label="label">
        <span class="devui-color-block" [style.background]="splitLabel('color', label)"></span>
        <span>{{ splitLabel('label', label) }}</span>
      </ng-template>
    </d-checkbox-group>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="chooseItems(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #textInputTemplate let-tagOption="tagOption" let-dropdown="dropdown">
  <input class="devui-category-search-type-text-input" dTextInput [(ngModel)]="tagOption.value.value" />
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="getTextInputValue(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #numberRangeTemplate let-tagOption="tagOption" let-dropdown="dropdown">
  <div class="devui-input-number-operation-area">
    <d-input-number
      size="sm"
      [min]="tagOption.min?.left"
      [max]="tagOption.max?.left"
      [maxLength]="tagOption.maxLength?.left"
      [step]="tagOption.step?.left || 1"
      [reg]="tagOption.reg?.left"
      [placeholder]="tagOption.placeholder?.left"
      [(ngModel)]="tagOption.value.value[0]"
    >
    </d-input-number>
    <span> - </span>
    <d-input-number
      size="sm"
      [min]="tagOption.min?.right"
      [max]="tagOption.max?.right"
      [maxLength]="tagOption.maxLength?.right"
      [step]="tagOption.step?.right || 1"
      [reg]="tagOption.reg?.right"
      [placeholder]="tagOption.placeholder?.right"
      [(ngModel)]="tagOption.value.value[1]"
    >
    </d-input-number>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="getNumberRangeValue(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #treeTemplate let-tagOption="tagOption" let-dropdown="dropdown" let-isSelected="isSelected">
  <div *ngIf="tagOption.options?.length">
    <ul class="devui-select-list">
      <span>{{ i18nCategorySearchText?.selected }}</span>
      <li class="devui-select-item devui-no-label-item" *ngFor="let item of tagOption.value.value; last as isLast">
        {{ item[tagOption.filterKey || tagOption.treeNodeTitleKey || 'title'] }}
        <span *ngIf="!isLast">, </span>
      </li>
    </ul>
  </div>
  <div *ngIf="tagOption.searchable">
    <input class="devui-input" [(ngModel)]="treeSearchKey" (ngModelChange)="treeSearch(tree, $event)" #searchInputModel="ngModel" />
    <span class="devui-form-control-feedback">
      <svg
        width="14px"
        height="14px"
        viewBox="0 0 14 14"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        class="svg-icon-search"
        style="vertical-align: middle"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-1.000000, -1.000000)">
            <path
              d="M7.30811922,1 C10.7919973,1 13.6162384,3.82424117 13.6162384,7.30811922 C13.6162384,8.72507634 13.149053,10.0329164 12.3603151,11.0860065 L14.7360564,13.4616238 C15.0879812,13.8135487 15.0879812,14.3841316 14.7360564,14.7360564 C14.3841316,15.0879812 13.8135487,15.0879812 13.4616238,14.7360564 L11.0860065,12.3603151 C10.0329164,13.149053 8.72507634,13.6162384 7.30811922,13.6162384 C3.82424117,13.6162384 1,10.7919973 1,7.30811922 C1,3.82424117 3.82424117,1 7.30811922,1 Z M7.31,2.51 C4.6590332,2.51 2.51,4.6590332 2.51,7.31 C2.51,9.9609668 4.6590332,12.11 7.31,12.11 C9.9609668,12.11 12.11,9.9609668 12.11,7.31 C12.11,4.6590332 9.9609668,2.51 7.31,2.51 Z"
              fill-rule="nonzero"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </div>
  <div class="devui-category-search-tree-container" [style.display]="tagOption.options?.length && !noRecord ? 'block' : 'none'">
    <d-operable-tree
      #tree
      [tree]="isSelected ? tagOption.value.options : tagOption.options"
      [treeNodeIdKey]="tagOption.treeNodeIdKey || 'id'"
      [treeNodeChildrenKey]="tagOption.treeNodeChildrenKey || 'children'"
      [treeNodeTitleKey]="tagOption.filterKey || tagOption.treeNodeTitleKey || 'title'"
      [checkboxDisabledKey]="tagOption.disabledKey || 'disabled'"
      [checkable]="true"
      [canActivateNode]="false"
      [canActivateParentNode]="false"
      [iconParentOpen]="tagOption.iconParentOpen || icons.iconParentOpen"
      [iconParentClose]="tagOption.iconParentClose || icons.iconParentClose"
      [iconLeaf]="tagOption.iconLeaf || icons.iconLeaf"
      (nodeChecked)="onOperableNodeChecked($event, tagOption)"
      class="devui-tree"
    >
    </d-operable-tree>
  </div>
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="noRecord" class="devui-no-data-tip">
    {{ i18nCommonText?.noRecordsFound }}
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="getTreeValue(tagOption, tree); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template #noData>
  <div class="devui-no-data-text">{{ i18nCommonText?.noData }}</div>
</ng-template>
